Collapsible
Click the button to toggle between showing and hiding the collapsible content.
css:
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
margin:20px;
}
</style>
HTML :
<button class="collapsible">
<span>
<span><span>1 </span></span>
Edafa IT Slutions
</span>
<a href="https://edafait.com/">
<span>
Go
</span> </a>
</button>
<div class="content">
<br />
<button class="collapsible">
<span>
<span>
<span class="eng2">2 </span>
</span>webxr
</span><a href="https://webxr.edafait.com/">
<span>Go </span>
</a>
</button>
<div class="content">
<br />
<button class="collapsible">
<span>
<span>
<span class="eng2">3 </span>
</span>Blog
</span>
<a href="https://blog.edafait.com/"><span>Go </span></a>
</button>
<div class="content">
<br />
<button class="collapsible">
<span>
<span>
<span class="eng2">4 </span>
</span>shorturl
</span>
<a href="http://shorturl.edafait.com/"><span>Go </span></a>
</button>
<br />
</div>
<br />
</div>
<br />
</div>
JS :
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight * 4 + "px";
}
});
}
</script>